<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
  
  var map, places, iw;
  var markers = [];
  var autocomplete;
  
  function initialize() {
    var myLatlng = new google.maps.LatLng(37.783259, -122.402708);
    var myOptions = {
      zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      panControl: false,
      streetViewControl: false,
      zoomControl: false,
      panControl: false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    places = new google.maps.places.PlacesService(map);
    google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
    
    document.getElementById('keyword').onkeyup = function(e) {
      if (!e) var e = window.event;
      if (e.keyCode != 13) return;
      document.getElementById("keyword").blur();
      search(document.getElementById('keyword').value);
    }
  }
  
  function tilesLoaded() {
    google.maps.event.clearListeners(map, 'tilesloaded');
    google.maps.event.addListener(map, 'zoom_changed', search);
    google.maps.event.addListener(map, 'dragend', search);
    search();
  }
  
  function search() {
    var type = document.getElementById('type').value;
    var keyword = document.getElementById('keyword').value;
    
    var search = {
      bounds: map.getBounds()
    };
    
    if (keyword) {
      search.keyword = keyword;
    }
    
    if (type != 'establishment') {
      search.types = [ type ];
    }
    
    places.search(search, function(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        clearResults();
        clearMarkers();
        for (var i = 0; i < results.length; i++) {
          var icon = 'icons/number_' + i + '.png';
          markers[i] = new google.maps.Marker({
            position: results[i].geometry.location,
            animation: google.maps.Animation.DROP
            //icon: icon
          });
          google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
          setTimeout(dropMarker(i), i * 100);
          addResult(results[i], i);
        }
      }
    })
  }
  
  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      if (markers[i]) {
        markers[i].setMap(null);
        markers[i] == null;
      }
    }
  }
  
  function dropMarker(i) {
    return function() {
      markers[i].setMap(map);
    }
  }
  
  function addResult(result, i) {
    var results = document.getElementById("results");
    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF');
    tr.onclick = function() {
      google.maps.event.trigger(markers[i], 'click');
    };
    
    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    var icon = document.createElement('img');
    icon.src = result.icon;
    icon.setAttribute("class", "placeIcon");
    var name = document.createTextNode(result.name);
    iconTd.appendChild(icon);
    nameTd.appendChild(name);
    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
    results.appendChild(tr);
  }
  
  function clearResults() {
    var results = document.getElementById("results");
    while (results.childNodes[0]) {
      results.removeChild(results.childNodes[0]);
    }
  }
  
  function getDetails(result, i) {
    return function() {
      places.getDetails({
          reference: result.reference
      }, showInfoWindow(i));
    }
  }
  
  function showInfoWindow(i) {
    return function(place, status) {
      if (iw) {
        iw.close();
        iw = null;
      }
      
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        iw = new google.maps.InfoWindow({
          content: getIWContent(place)
        });
        iw.open(map, markers[i]);        
      }
    }
  }
  
  function getIWContent(place) {
    var content = "";
    content += '<table>';
    content += '<tr><td style="text-align: right"><img class="placeIcon" src="' + place.icon + '"/></td>';
    content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b></td></tr>';
    content += '<tr><td class="iw_attribute_name">Address:</td><td>' + place.vicinity + '</td>';
    if (place.formatted_phone_number) {
      content += '<tr><td class="iw_attribute_name">Telephone:</td><td>' + place.formatted_phone_number + '</td>';      
    }
    if (place.rating) {
      content += '<tr><td class="iw_attribute_name">Rating:</td><td>' + place.rating + '</td>';
    }
    if (place.website) {
      content += '<tr><td class="iw_attribute_name">Website:</td><td><a href="' + place.website + '">' + place.website + '</a></td>';
    }
    content += '</tr></table>';
    return content;
  }
</script>
<style>
body {
  font-family: sans-serif;
  font-size: 24pt;
}
#map_canvas {
  position: absolute;
  width: 634px;
  height: 478px;
  top: 50px;
  left: 0px;
  border: 1px solid grey;
}
#listing {
  position: absolute;
  width: 400px;
  height: 480px;
  overflow: auto;
  left: 636px;
  top: 50px;
  cursor: pointer;
}
#controls {
  width: 380px;
  position: absolute;
  top: 0px;
  left: 634px;
  height: 120px;
  padding: 5px;
}
#type {
  -webkit-appearance: none;
  font-size: 16pt;
  padding: 4px;
}
.placeIcon {
  width: 32px;
  height: 32px;
  margin: 4px;
}
#results {
  font-size: 20px;
  border-collapse: collapse;
  width: 380px;
}
#locationField {
  width: 900px;
  height: 25px;
  top: 0px;
  left: 0px;
  position: absolute;
}
#keyword {
  width: 634px;
  font-size: 24pt;
}
.iw_attribute_name {
  font-weight: bold;
  text-align: right;
}
</style>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="keywordField">
    <input id="keyword" type="text" />
  </div>
  <div id="controls">
    <form name="controls">
    <select id="type" onChange="search()">
      <option value="establishment">All</option>
      <option value="atm">ATM</option>
      <option value="bar">Bars</option>
      <option value="cafe">Cafe</option>
      <option value="clothing_store">Clothing store</option>
      <option value="museum">Museums</option>
      <option value="restaurant">Restaurants</option>
      <option value="university">University</option>
    </select>
    </form>
  </div>
  <div id="map_canvas"></div>
  <div id="listing"><table id="results"></table></div>
</body>
</html>
